<template>
  <!-- 左侧导航栏 -->
  <nav id="blog-nav">
    <a class="nav classify-nav ellipsis" :class="[route.name=='index'?'active':'']" @click="doIndex">
      <img title="首页" src="/images/home.png">
      <span>首页</span>
    </a>
    <a class="nav classify-nav ellipsis" v-for="item in classifyList" :key="item.id" :class="[!item.icon?'no-icon':'',route.name=='classify'&&route.query.classifyId==item.id?'active':'']" @click="doClassify(item)">
      <img :title="item.name" v-if="item.icon" :src="`${apiBase}/${item.icon}`">
      <span>{{item.name}}</span>
    </a>
    <a class="nav link-nav ellipsis" v-for="item in linkList" :class="[!item.icon?'no-icon':'']" :key="item.id" :href="item.link" target="_blank">
      <img :title="item.name" v-if="item.icon" :src="`${apiBase}/${item.icon}`">
      <span>{{item.name}}</span>
    </a>
  </nav>
</template>

<script setup lang="ts">
const { public: { apiBase } } = useRuntimeConfig()
const route = useRoute()
interface classify {
  id:number,
  icon:string,
  name:string
}
interface link {
  id:number,
  icon:string,
  name:string,
  link:string
}
interface Props {
  classifyList:classify[],
  linkList:link[]
}

const props = withDefaults(defineProps<Props>(), {
    classifyList: () => {return []},
    linkList: () => {return []}
})
const doIndex = async () => {
  await navigateTo({
    path:'/'
  })
}
const doClassify = async (item:classify) => {
  await navigateTo({
    path:'/classify',
    query:{
      classifyId:item.id
    }
  })
}
</script>

<style lang="less">
  #blog-nav{
    display:block;
    position:fixed;
    width:160px;
    .nav{
      display:block;
      padding:0 15px;
      margin-bottom:7.5px;
      line-height:42px;
      font-weight:bold;
      letter-spacing:1px;
      border-radius:4px;
      &.classify-nav:hover,&.classify-nav.active{
        color:#0088f5;
        background:#fff;
      }
      &.link-nav{
        color:#ff5722;
        &:hover{
          background:#fff;
        }
      }
      &.no-icon{
        padding-left:48px;
      }
      >img{
        width:16px;
        max-height:20px;
        margin-right:12px;     
        vertical-align: middle
      }
      >span{
        vertical-align: middle
      }
    }
  }
</style>